<template>
    <a-layout-content
            :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
    >
    <a-button type="primary" @click="add">添加</a-button>
  <a-table :columns="columns"
           :row-key="record => record.id"
           :data-source="categoryLevels"
            >

      <template v-slot:action="{text: record}" >
        <a-space>
          <a-button type="primary" :size="size" @click="edit(record)">修改</a-button>
          <a-button type="primary" danger @click="del(record.id)">删除</a-button>
        </a-space>
      </template>
  </a-table>
    </a-layout-content>
    <a-modal v-model:visible="modelVisible" title="修改分类信息" @ok="handleOk">
        <a-form
                :model="category"
                v-bind="layout"
        >

            <a-form-item :name="['category', 'name']" label="名称" :rules="[{ type: 'email' }]">
                <a-input v-model:value="category.name" />
            </a-form-item>
            <a-form-item :name="['category', 'parent']" label="父级分类">
                <a-select
                        ref="select"
                        v-model:value="category.parent"
                >
                    <a-select-option value="0">无</a-select-option>
                    <a-select-option v-for="c in categoryLevels" :key="c.id" :value="c.id" :disabled="category.id === c.id">
                        {{c.name}}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item :name="['category', 'sort']" label="排序">
                <a-input v-model:value="category.sort" />
            </a-form-item>
        </a-form>
    </a-modal>
    <a-modal v-model:visible="DeleteModelVisible" title="删除分类" @ok="handleDeleteOk">
        <p>删除数据后不能恢复！</p>
    </a-modal>
</template>

<script lang="ts">
  import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
  import { defineComponent, ref,onMounted } from 'vue';
  import axios from 'axios';
  import {Tool} from "@/util/tool";
  import { message } from 'ant-design-vue';
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '父级分类',
      dataIndex: 'parent',
    },
    {
      title: '排序',
      dataIndex: 'sort',
    },
    {
      title: '操作',
      key: 'action',
      slots: { customRender: 'action' }
    },
  ];
  //定义电子书的列表
  const categorys = ref();
  const categoryLevels= ref();
   export default defineComponent({
     name: 'Category',
     components: {
       SmileOutlined,
       DownOutlined,
     },
    setup() {
        //页面加载完成后获取后台数据
        onMounted(()=>{
            console.log("onMounted");
            //调用查询的方法
            handleQuery();
        });

      //进行异步请求获取后台数据
      const handleQuery = ()=>{
          axios.get("/category/getAll").then(function (response) {
              //接收返回的数据
              const result = response.data;
              if(result.success){//请求成功
                  categorys.value = response.data.content;//给响应式的变量赋值
                  console.log("后台返回的数据："+categorys.value);
                  categoryLevels.value = Tool.array2Tree(categorys.value,0);//获取一级分类及其子分类
                  console.log("转换后的数据："+categoryLevels.value);
              }
          });
      };
        /**
         * 修改数据
         */
        //定义变量来控制弹窗的显示和隐藏
        const modelVisible = ref(false);
        const category = ref();
        const edit = (record:any) => {
            modelVisible.value = true;//显示弹窗
            category.value = record;//将对象的属性赋值给category对象
            console.log("====="+category.value);
        };
        const handleOk = (e: MouseEvent) => {
            modelVisible.value = false;//隐藏弹窗
            axios.post("/category/save",category.value).then(function (response) {
                console.log("====="+category.value);
                //接收返回的数据
                const result = response.data;
                console.log("后台返回的数据："+result);
                if(result.success){//更新成功
                    message.info(result.message);
                    //调用查询的方法
                    handleQuery();
                }else{
                    message.error(result.message)
                }
            });
        };
        /**
         * 删除电子书
         * */
        const DeleteModelVisible = ref(false);
        let delId = -1;
        const del = (id:any) => {
            DeleteModelVisible.value = true;
            delId = id;
            console.log(id);
        };
        const handleDeleteOk = (e: MouseEvent) => {
            axios.post("/category/delete/"+delId).then(function (response) {
                //接收返回的数据
                const result = response.data;
                console.log("后台返回的数据："+result);
                if(result.success){//更新成功
                    message.info(result.message);
                    DeleteModelVisible.value = false;
                    //重新从数据库查询数据
                    handleQuery();
                }else{
                    message.error(result.message)
                };
            });
        };
        /**
         * 添加电子书的方法
         *
         */
        const add = () => {
            //清空对象中的属性
            category.value = {};
            modelVisible.value = true;//显示弹窗
        };
      return {
        categorys,
        columns,
        edit,
        handleOk,
        modelVisible,
        category,
          del,
          add,
          handleDeleteOk,
          DeleteModelVisible,
          categoryLevels
      };
    }
  });
</script>
<style>
    img{
        width: 50px;
        height:50px;
    }
</style>
